<template>
  <div class="cus-tag">
    <div class="cus-tag-circle" :style="circleStyle"></div>
    <div class="cus-tag-body" :style="textStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "cus-tag",
    props: {
      type: {
        type: String,
        // primary success info warning error
        default: 'primary'
      }
    },
    computed: {
      circleStyle(){
        let style = {};
        if (this.type == 'primary') {

        } else if (this.type == 'info') {

        } else if (this.type == 'success') {
          style.background = '#00AA5A';
        } else if (this.type == 'warning') {

        } else if (this.type == 'error') {
          style.background = '#FF4746';
        }
        return style
      },
      textStyle(){
        let style = {};
        if (this.type == 'primary') {

        } else if (this.type == 'info') {

        } else if (this.type == 'success') {
          style.color = '#00AA5A';
        } else if (this.type == 'warning') {

        } else if (this.type == 'error') {
          style.color = '#FF4746';
        }
        return style
      },
    }
  }
</script>

<style scoped lang="less">
  .cus-tag{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &-circle{
      width: 4px;
      height: 4px;
      margin-right: 4px;
    }
    &-body{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-family: MicrosoftYaHei;
      line-height: 16px;
    }
  }
</style>
